<template>
  <div>
    <h3>流量/空间</h3>
    <el-row :gutter="20">
      <el-col :span="10"><div class="grid-content1">
        <span style="float: left;">流量</span>
        <span style="float: left;"><el-progress :text-inside="true" :stroke-width="20" :percentage="50"></el-progress></span>
        <span style="float: left;">265.32MB/500000MB</span>
        <span style="float: right;"><a><ins>升级</ins></a></span>
      </div></el-col>
      <el-col :span="10"><div class="grid-content1">
        <span style="float: left;">空间</span>
        <span style="float: left;"><el-progress :text-inside="true" :stroke-width="20" :percentage="70"></el-progress></span>
        <span style="float: left;">547MB/5000MB</span>
        <span style="float: right;"><a><ins>升级</ins></a></span>
      </div></el-col>
      <el-col :span="4"><div class="grid-content1"></div></el-col>
    </el-row>
    
    <h3>文章管理</h3>
      <el-col :span="24"><div class="grid-content2">
        <span style="float: left;"><el-button plain size="small" class="border_color">上传</el-button></span>
        <span style="float: left;"><el-input placeholder="请输入内容" size="small" prefix-icon="el-icon-search" v-model="input2"></el-input></span>
        <span style="float: right;"><el-button type="text">操作记录</el-button></span>
        <span style="float: right;"><el-button type="text">批量删除</el-button></span>
        <span style="float: right;"><el-button type="text">批量下载</el-button></span>
        <span style="float: right;"><el-button type="text">筛选</el-button></span>
        <el-table :data="tableData1" stripe style="width: 100%" class="table">
          <el-table-column prop="name" label="名称" width="240"></el-table-column>
          <el-table-column prop="type" label="类型" width="240"></el-table-column>
          <el-table-column prop="explain" label="说明" width="240"></el-table-column>
          <el-table-column prop="operate" label="操作" width="400">
            <template slot-scope="scope">
              <el-button @click.native.prevent="handleDelete(scope.$index, tableData)" type="text">删除</el-button>
              <el-button @click.native.prevent="handleDownload(scope.$index, tableData)" type="text">下载</el-button>
              <el-button @click.native.prevent="handleCopy(scope.$index, tableData)" type="text">复制</el-button>
            </template>
          </el-table-column>   
        </el-table>
      </div></el-col>
 
    <span style="float: left;"><h3>网站备份</h3></span>
    <span style="float: left;"><el-button size="small" plain class="border_color">+备份</el-button></span>
    <span style="float: right;"><el-button size="small" plain class="border_color">操作日志</el-button></span>
    <span style="float: right;"><el-button size="small" plain class="border_color">自动备份设置</el-button></span>
      <el-col :span="24"><div class="grid-content2">
        <el-table :data="tableData2" stripe style="width: 100%" class="table">
          <el-table-column prop="time" label="备份时间" width="300"></el-table-column>
          <el-table-column prop="remark" label="备注" width="300"></el-table-column>
          <el-table-column prop="operate" label="操作" width="520"><template slot-scope="scope"><el-button @click.native.prevent="handleRestore(scope.$index, tableData)" type="text">恢复备份</el-button></template></el-table-column>
        </el-table>
    </div></el-col>
  </div>
</template>

<script>
export default {
  name: 'Laucher',
  data() {
    return {
      countDown: 5,
      timer: null,
      input: '',
      tableData1: [{
          name: '22',
          type: 'JPG',
          explain:'-',
        }],
      tableData2: [{
        time: '2024.02.03',
        remark: '-',
      }]
    }
  },
  mounted() {
    // if (true) {
      // this.$router.replace('/Main')
    // } else {
      // this.$router.replace('/login')
    // }
  },
  methods:{
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleDownload(index, row) {
      console.log(index, row);
    },
    handleCopy(index, row) {
      console.log(index, row);
    },
    handleRestore(index, row) {
      console.log(index, row);
    },
  }
}
</script>

<style scoped>
#Laucher {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h3 {
  margin-left: 20px;
  margin-bottom: 20px;
  font-weight: bold;
}
ins{
  color: #409EFF;
  cursor: pointer;
}
span{
  padding-right: 15px;
}
.grid-content1 {
    min-height: 40px;
    padding-top: 20px;
    padding-left: 20px;
    margin-bottom: 20px;
    border:1px solid #909399 ;
}
.grid-content2 {
    min-height: 150px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 20px;
    border:1px solid #909399 ;
}
.table{
  padding-top: 10px;
  padding-left: 40px;
}
.border_color{
  border: 1px solid #333;
}
.el-progress {  
  width: 230px; 
}
</style>